<template>
    <teleport to="body">
      <transition name="message-fade">
        <div v-if="visible" class="message" :class="[type]">
          <span>{{ content }}</span>
        </div>
      </transition>
    </teleport>
  </template>
   
  <script setup>
  import { ref, onMounted } from 'vue'
   
  const props = defineProps({
    content: String,
    type: { type: String, default: 'info' },
    duration: { type: Number, default: 3000 }
  })
   
  const visible = ref(false)
   
  onMounted(() => {
    visible.value  = true 
    setTimeout(() => {
      visible.value  = false 
      // 动画结束后销毁组件 
      setTimeout(() => {
        // 通过父级移除DOM及实例 
        if (vm && vm.$el.parentNode)  {
          vm.$el.parentNode.removeChild(vm.$el) 
        }
      }, 300)
    }, props.duration) 
  })
  </script>
   
  <style>
  .message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: #f4f4f5;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  .message.success  { background: #f0f9eb; color: #67c23a; }
  .message.error  { background: #fef0f0; color: #f56c6c; }
  /* 过渡动画 */
  .message-fade-enter-active { transition: opacity 0.3s, transform 0.3s; }
  .message-fade-leave-active { transition: opacity 0.3s, transform 0.3s; }
  .message-fade-enter-from,
  .message-fade-leave-to {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  </style>